<template>
  <div class="result-container">
    <div class="title-wrap">
      <h2 class="title">{{$route.query.q}}</h2>
      <span class="sub-title">找到{{total}}个结果</span>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" v-for="(item,i) in searchResult" :key="i" @click="playSong(i)">
              <td>{{i+1}}</td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span v-if="item.mvid!=0" class="iconfont icon-mv"></span>
                  </div>
                </div>
              </td>
              <td>{{item.artists[0].name}}</td>
              <td>{{item.album.name}}</td>
              <td>{{item.duration | dateFormat}}</td>
            </tr>
          </tbody>
        </table>
        <!-- 分页器 -->
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :current-page="page"
          :page-size="10" :limit="limit" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="lists">
        <div class="items">
          <div class="item" v-for="(item,i) in songList" :key="i" @click="toPlayList(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount | countFormat}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MV" name="mv">
        <div class="items mv">
          <div class="item" v-for="(item,i) in mvList" :key="i" @click=toMv(item.id)>
            <div class="img-wrap">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount | countFormat}}</div>
              </div>
              <span class="time">02:43</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { searchAPI,getSongUrlAPI } from '@/api'
  export default {
    name: 'result',
    data() {
      return {
        activeIndex: 'songs',
        searchResult: [],
        page: 1,
        limit: 10,
        total: 0,
        bg: 0,
        // 歌单数据
        songList: [],
        //mv数据
        mvList: [],
        inputValue: this.$route.query.q
      };
    },
    created() {
      this.getSearch()
    },
    watch: {
      async activeIndex(val) {
        //songs 歌曲
        //lists 歌单
        //mv mv
        let type = 1;
        switch (this.activeIndex) {
          case 'songs':
            type = 1;
            break;
          case 'lists':
            type = 1000;
            break;
          case 'mv':
            type = 1004;
            break;

          default:
            break;
        }
        if (type === 1) {
          const res = await searchAPI({
            keywords: this.$route.query.q,
            type,
            limit: this.limit,
            offset: (this.page - 1) * this.limit
          })
          this.searchResult = res.data.result.songs
          this.total = res.data.result.songCount
          this.id = res.data.result.songs.id
        }
        else if (type === 1000) {
          const res = await searchAPI({
            keywords: this.$route.query.q,
            type,
            limit: this.limit,
            offset: (this.page - 1) * this.limit
          })
          this.songList = res.data.result.playlists
          this.total = res.data.result.playlistCount
        }
        else if (type === 1004) {
          const res = await searchAPI({
            keywords: this.$route.query.q,
            type,
            limit: 8,
            offset: (this.page - 1) * this.limit
          })
          this.mvList = res.data.result.mvs
          this.total = res.data.result.mvCount
        }
      },
      $route() {
        this.inputValue = this.$route.query.q
        this.getSearch()
      }
    },

    methods: {
      async getSearch() {
        const res = await searchAPI({
          keywords: this.$route.query.q,
          type: 1,
          limit: this.limit,
          offset: (this.page - 1) * this.limit
        })
        this.searchResult = res.data.result.songs
        this.total = res.data.result.songCount
        this.id = res.data.result.songs.i
      },
      handleCurrentChange(val) {
        this.page = val
        this.getSearch()
      },
      playSong(i) {
        this.getMusicUrl(this.searchResult[i].id)
        this.bg = 1
      },
      async getMusicUrl(id) {
        const songUrlRes = await getSongUrlAPI(id)
        this.$parent.audio.url = songUrlRes.data.data[0].url
        this.$emit('newsInfo', id);
      },
      toPlayList(id) {
        this.$router.push(`/playlist?q=${id}`)
      },
      toMv(id) {
        this.$router.push(`/mv?q=${id}`)
      }
    },
  };
</script>

<style>

</style>